<template>
	<view>
		<view class="status_bar">
				<!-- 这里是状态栏 -->
		</view>
		<!-- 图片 -->
		<view v-if="isSuccess" style="margin-top: 120rpx;text-align: center;">
			<image src="/static/order/img_zhifuchenggong.png" style="width: 260rpx;height: 237rpx;" mode=""></image>
			<view style="font-size: 36rpx; font-weight: bold;margin-top: 23rpx;">支付成功</view>
			<!-- <view class="u-m-t-68" style="position: relative;">
				<image src="/static/order/img_bg.png" style="width: 565rpx;height: 400rpx;" mode=""></image>
				<view style="position: absolute;top:22%;left:50%; transform: translate(-50%,-50%);font-size: 50rpx;">
					￥{{ orderInfo.actualAmount }}
				</view>
				<view class="bg-content">
					<view class="u-m-b-14">订单编号：{{ orderInfo.tradeNo }}</view>
					<view class="u-m-b-14">下单时间：{{ orderInfo.createdTime }}</view>
					<view class="u-m-b-14">支付方式：{{ payment(orderInfo.paymentMethod) }}</view>
				</view>
			</view> -->
			<view class="u-m-t-68" style="padding: 0 78rpx;height: 400rpx;position: relative;">
				<image src="/static/order/img_bg.png" style="width:100%;height: 100%;" mode=""></image>
				<view style="position: absolute;top:22%;left:50%; transform: translate(-50%,-50%);font-size: 50rpx;">
					￥{{ orderInfo.actualAmount }}
				</view>
				<view class="bg-content">
					<view class="u-m-b-14">支付单号：{{ orderInfo.tradeNo }}</view>
					<view class="u-m-b-14">下单时间：{{ $fui.dateFormatter(orderInfo.createdTime,'y-m-d h:i') }}</view>
					<view class="u-m-b-14">支付方式：{{ payment(orderInfo.paymentMethod) }}</view>
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 220rpx;text-align: center;">
			<image src="/static/order/img_yiquxiao.png" style="width: 221rpx;height: 237rpx;" mode=""></image>
			<view style="font-size: 36rpx; font-weight: bold;margin-top: 23rpx;">支付失败</view>
		</view>
		<view class="u-flex u-row-center" :style="{marginTop}">
			<view class="u-m-r-60">
				<u-button shape="circle" :ripple="true" hover-calss="none" :hair-line="false" :custom-style="getBtStyle('plain', 200, 80)" @click="toPage">回首页</u-button>
			</view>
			<view>
				<u-button shape="circle" :ripple="true" hover-calss="none" :hair-line="false" :custom-style="getBtStyle('default', 200, 80)" @click="$mRouter.redirectTo({ route: '/pages/purchase/payorder/payOrderDetails?id=' + routePageId})">查看订单</u-button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {},
				isSuccess:false,
				routePageId:null
			}
		},
		onLoad(option) {
			console.log(option);
			this.routePageId = option.id;
			console.log(option.id);
			this.payResultInit(option.id);
			// this.orderInfo = option
			// this.orderInfo.state = Number(this.orderInfo.state)
			// console.log(this.orderInfo)
		},
		computed: {
			marginTop() {
				let marginTop = '50rpx'
				if (this.orderInfo.state == 0) {
					marginTop = '200rpx'
				}
				return marginTop
			}
		},
		methods: {
			toPage() {
				this.$mRouter.switchTab({ route: '/pages/index/index', success() {
					let page = getCurrentPages().pop();  //跳转页面成功之后
					if (!page) return;   
					page.onLoad(); //如果页面存在，则重新刷新页面
				}})
			},
			async payResultInit(id){
				uni.showLoading({
					title:'loading...'
				})
				try{
					const res = await this.$newHttp.get('api/TradePayment/GetAndRefreshStatus',{ params:{id: id}});
					uni.hideLoading({
						title:'loading...'
					})
					console.log(res)
					if(res.code === 200){
						 this.isSuccess = true;
						this.orderInfo = res.data;
					}else{
						 this.isSuccess = false;
					}
				}catch(e){
					//TODO handle the exception
					console.log(JSON.stringify(e))
					this.isSuccess = false;
					uni.hideLoading()
				}
				 
			},
			payment(value) {
				// console.log(this.$store.state.order.paymentMethod)
				// return this.$store.state.order.paymentMethod.find(item => {
				// 	return item.value = value
				// }).label
				switch(value){
					case 0:
						return '微信支付'
						break;
					case 1:
						return '支付宝支付'
						break;
					case 2:
						return '银联支付'
						break;
					case 3:
						return '线下支付'
						break;
					case 4:
						return '线下支付'
						break;
					case 5:
						return '支付宝支付'
						break;
					case 6:
						return '支付宝支付'
						break;
					case 11:
						return '支付宝支付'
						break;
					default:
						return '支付宝支付'	
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-content {
		position: absolute;
		text-align: left;
		width: 100%; 
		bottom: 15%;
		left: 18%;
		// left: 50%;
		// transform: translateX(-50%);
		// padding-left: 140rpx;
		// padding: 0 auto;
		// transform: translate(-50%,-50%);
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
